<script setup lang="ts">
import CommonPlayButtons from './Common/CommonPlayButtons.vue';
import CommonComment from './Comment/CommonComment.vue'
import { ref, onBeforeMount, inject } from 'vue'
import { getMusic } from '../utils/api';
import { Music, User, setSrcAndPlayKey, setSrcAndPlay, addMusicToListKey, addMusicToList, popMessageKey, popMessage } from '@/type';
import { useStore } from '../stores';
import { useRouter } from 'vue-router';
const store = useStore()
const router = useRouter()
const BASEURL = store.getBaseUrl()
const props = defineProps(['musicId'])
const showDetail = ref(true);
const setSrcAndPlay = inject(setSrcAndPlayKey) as setSrcAndPlay
const addMusicToList = inject(addMusicToListKey) as addMusicToList
const popMessage = inject(popMessageKey) as popMessage

/**
 * 当歌曲描述太长时需要显示展开按钮
 * @description 用于控制是否显示展开按钮
 */
const needToBeOmitted = ref(false);

const music = ref<{ music?: Music, userList?: User[] }>({})
onBeforeMount(() => {
    getMusic(props.musicId).then((res) => {
        if (res.data.code == 1) {
            music.value.music = res.data.data.music
            music.value.userList = res.data.data.userList
        }
    })
})
// /**
//  * @description 展开 / 收起歌单描述
//  */
// const switchOmitted = () => {
//     needToBeOmitted.value = !needToBeOmitted.value;
// }
// const switchShowDetail = (state: boolean) => {
//     showDetail.value = state;
// }
const toSingerPage = (id: string) => {
    router.push({
        name: 'singer', params: { id }
    })
}
</script>
<template>
    <div id="container">
        <div class="content">
            <div class="musicInfoContainer">
                <div class="musicImage">
                    <img :src="BASEURL + '/static/image/' + music.music?.image" alt="">
                </div>
                <div style="margin-bottom: 50px;">
                    <div class="titleContainer">
                        <h2 class="title">{{ music?.music?.title }}</h2>
                        <div class="info">
                            <p class="singer">
                                <span>歌手:</span>
                                <span @click="toSingerPage(singer.id)" class="singerName"
                                    v-for="singer of music.userList">{{ singer.name
                                    }}</span>
                            </p>
                            <p v-if="false" class="from">
                                <span>所属专辑:</span>
                                <span class="cdName">暂时没做</span>
                            </p>
                        </div>
                        <template v-if="music.userList != undefined">
                            <CommonPlayButtons :type-id="props.musicId" :music="(music.music as Music)" :music-list="null"
                                :user-list="(music.userList as User[])" type="singleMusic" />
                        </template>

                        <div class="introduce">
                            <p>{{ music.music?.introduce == null ? "暂时没有介绍" : music.music?.introduce }}
                            </p>
                            <a class="detail" v-if="needToBeOmitted">{{
                                showDetail ? "收起" : "展开" }} </a>
                        </div>
                    </div>
                </div>
            </div>
            <CommonComment :myMusic="false" type="m" :typeId="props.musicId" />
        </div>
    </div>
</template>
<style scoped lang="css">
.musicInfoContainer {
    display: flex;
}

.singerName,
.cdName {
    margin-left: 8px;
    color: var(--blue-style);
    cursor: pointer;
}

.singer,
.from {
    font-size: 14px;
    margin-top: 0;
}

.titleContainer .title {
    margin-top: 0;
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 20px;
}

.musicImage {
    margin: 0px 30px 10px 40px;
}

.musicImage img {
    width: 206px;
}

.content {
    flex: 1;
    border-right: 1px solid #ccc;
    display: flex;
    padding-top: 30px;
    flex-direction: column;
}



#container {
    display: flex;
}
</style>